<template>
  <div class="screen-block">
    <Title title="地区趋势"></Title>
    <div ref="chartRef" style="width: 100%; height: 90%;"></div>
  </div>
</template>
<script setup lang="ts">
import type { ECharts, EChartsCoreOption } from 'echarts';
import { onMounted, shallowRef, nextTick } from 'vue';
import * as echarts from 'echarts';
import Title from '../Title.vue';

const chartRef = shallowRef<HTMLDivElement | null>(null);
const chart = shallowRef<ECharts | null>(null);

onMounted(() => {
  nextTick(() => {
    if (chartRef.value) {
      chart.value = echarts.init(chartRef.value);
      renderChart();
    }
  })
});

const data = [
  {
    name: "上海",
    data: [
      "155.13",
      "154.65",
      "171.46",
      "164.38",
      "237.23",
      "300.65",
      "240.29",
      "232.07",
      "193.31",
      "136.70",
      "48.64",
      "90.20",
    ],
  },
  {
    name: "北京",
    data: [
      "86.25",
      "33.80",
      "145.58",
      "21.79",
      "176.09",
      "132.41",
      "291.05",
      "191.89",
      "151.54",
      "94.25",
      "141.75",
      "157.14",
    ],
  },
  {
    name: "深圳",
    data: [
      "143.94",
      "186.29",
      "183.64",
      "251.48",
      "195.48",
      "152.16",
      "52.47",
      "184.12",
      "203.79",
      "39.16",
      "56.37",
      "161.64",
    ],
  },
  {
    name: "广州",
    data: [
      "57.60",
      "77.61",
      "307.24",
      "165.05",
      "175.41",
      "276.88",
      "269.04",
      "296.11",
      "105.31",
      "283.39",
      "134.08",
      "265.38",
    ],
  },
  {
    name: "重庆",
    data: [
      "200.82",
      "215.56",
      "249.80",
      "222.67",
      "216.98",
      "60.12",
      "309.68",
      "273.35",
      "150.99",
      "251.97",
      "26.15",
      "186.99",
    ],
  },
];

const renderChart = () => { // 定义渲染图表的函数
  const option: EChartsCoreOption = { // 定义ECharts配置选项对象
    grid: { // 配置图表的网格布局
      top: "25%", // 上边距
      right: "4%", // 右边距
      bottom: "1%", // 下边距
      left: "3%", // 左边距
      containLabel: true, // 包含坐标轴标签
    },
    tooltip: { // 配置提示框组件
      trigger: "axis", // 设置触发器类型为轴触发，即鼠标悬停在坐标轴上时显示提示框
    },
    legend: { // 图例配置
      left: 20, // 设置图例距离左侧的距离为20像素
      top: "8%", // 设置图例距离顶部的距离为容器高度的8%
      icon: "circle", // 设置图例图标为圆形
      data: data.map((item) => item.name), // 动态设置图例数据，从数据项中提取name属性
      textStyle: { // 设置图例文字样式为浅灰色
        color: "#aaa",
      },
    },
    xAxis: { // X轴配置
      type: "category", // 设置X轴类型为类别轴
      data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], // 设置X轴数据为12个月份
      boundaryGap: false, // 设置坐标轴两端不留白
    },
    yAxis: { // Y轴配置
      type: "value" // 设置Y轴类型为数值轴
    },
    series: getSeries() // 系列列表配置，调用getSeries函数获取系列数据
  };

  // 3.echarts实例调用setOption方法，传入option对象
  chart.value!.setOption(option);
};

function getSeries() {

  // 半透明的颜色值 ，用于图表线条和标记的正常显示状态
  const colorArr1 = [
    "rgba(11, 168, 44, 0.5)",
    "rgba(44, 110, 255, 0.5)",
    "rgba(22, 242, 217, 0.5)",
    "rgba(254, 33, 30, 0.5)",
    "rgba(250, 105, 0, 0.5)",
  ];
  // 全透明的颜色值 ，用于图表的隐藏或淡化效果
  const colorArr2 = [
    "rgba(11, 168, 44, 0)", // 绿色，全透明
    "rgba(44, 110, 255, 0)",
    "rgba(22, 242, 217, 0)",
    "rgba(254, 33, 30, 0)",
    "rgba(250, 105, 0, 0)",
  ];

  const seriesArr = data.map((item, index) => { /** * 将输入数据转换为图表系列配置数组 * 每个系列代表一条折线图，包含名称、类型、数据及样式配置 */
    return {
      name: item.name, // 系列名称，用于图例显示
      type: "line", // 图表类型为折线图
      data: item.data, // 系列的数据点
      lineStyle: { // 折线样式配置
        width: 3 // 折线宽度为3像素
      },
      itemStyle: { // 数据项样式配置
        borderWidth: 4, // 数据点边框宽度为4像素
      },
      symbol: "circle", // 设置图表的标记符号为圆形
      smooth: true, // 启用折线图的平滑效果
      areaStyle: { // 设置区域填充样式
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 创建一个线性渐变对象，从上到下
          { // 渐变起始颜色，使用colorArr1数组中的对应颜色
            offset: 0,
            color: colorArr1[index]
          },
          { // 渐变结束颜色，使用colorArr2数组中的对应颜色
            offset: 1,
            color: colorArr2[index]
          }
        ])
      }
    }
  });
  return seriesArr; // 返回生成的图表配置数组
}

</script>
<style scoped lang="scss">
.screen-block {
  width: 100%;
  height: 550px;
  background-color: var(--ds-block-bg);
  padding: 16px;
  margin-top: 20px;
}
</style>